<template>
  <el-row class="mosWrap">
    <el-row type="flex" class="tableHeaderWrap">
      <div class="tableHeader" style="flex: 1">序号</div>
      <div class="tableHeader" style="flex: 2">时间</div>
      <div class="tableHeader" style="flex: 4">告警详细</div>
      <div class="tableHeader" style="flex: 2">告警级别</div>
    </el-row>
      <div style="display: flex;flex-direction: column;height:calc(100% - 30px);">
        <el-row
        v-for="(city, index) in dataList"
        :key="index" type="flex"
        :class="index%2 !== 0 ? 'dark' : ''"
        class="tableBody"
      >
        <!-- 序号 -->
        <div class="tableName" style="flex: 1">
          <div class="circle">{{ index + 1 }}</div>
        </div>
        <!-- 时间 -->
        <div class="tableName" style="flex: 2">{{ city.time }}</div>
        <!-- 告警详细 -->
        <div class="tableName" style="flex: 4;">
          <el-tooltip :content="city.detail" placement="right">
            <div style="width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center">{{ city.detail }}</div>
          </el-tooltip>
        </div>
        <!-- 告警级别 -->
        <div class="tableName" style="flex: 2">{{ city.level }}</div>
      </el-row>
      </div>
  </el-row>
</template>

<script>
  export default {
    name: 'TableLeft',
    props: {
      dataList: {
        type: Array,
        default: ()=>[]
      }
    },
    data() {
      return {
        dataType: 10
      }
    },
    methods: {
      clickedBtn(value) {
        this.dataType = value
        this.$bus.$emit('tableTypeChange', value)
      }
    }
  }
</script>

<style scoped>
.mosWrap{
  /*border-radius: 5px;*/
  /*background: rgba(14,22,95,0.4);*/
  /*box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);*/
  /*border: 1px solid rgba(14,101,187,0.46);*/
  height: 100%;
}
.tableHeaderWrap{
  background: #2b5353;
  border-top: 1px solid rgba(102,153,153,0.5);
  border-bottom: 1px solid rgba(102,153,153,0.5);
  /*margin: 20px 0 10px 0;*/
  padding: 2px 30px 0 10px;
}
.tableHeader{
  flex: 1;
  color: #FFFFFF;
  font-family: Microsoft Tai Le;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  height: 24px;
  text-align: center;
}
.tableName{
  display: flex;
  flex: 1;
  justify-content: center;
  font-family: Microsoft Sans Serif;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
}
.tableBody{
  flex: 1;
  align-items: center;
  padding: 0px 30px 0 10px;
  color: #ffffff;
  /*max-height: 30px;*/
  /*line-height: 50px;*/
  font-size: 14px;
}
.tableBody:hover{
  background: linear-gradient(rgb(133, 201, 201), rgb(102, 154, 154));
  color: #ffffff;
}
.circle{
  font-weight: bold;
  width: 20px;
  height: 20px;
  background: rgb(102,153,153);
  border-radius: 50%;
  line-height: 20px;
}
.dark{
  background: rgba(102,153,153,0.3)
}
.dark:hover{
  background: linear-gradient(rgb(133, 201, 201), rgb(102, 154, 154));
  color: #ffffff;
}
@media only screen and (min-width: 1921px) {
  .tableHeader {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1920px) {
  .tableHeader {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1600px) {
  .tableHeader {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1440px) {
  .tableHeader {
    font-size: 14px;
  }
}
  .typeBtn{
    display: inline-block;
    margin-right: 8px;
    width: 44px;
    height: 28px;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    border-radius: 2px;
    background: linear-gradient(180deg, #33367b 0%, #050d25 100%);
    box-shadow: 0px 0px 4px 0px #121212 inset;
    cursor: pointer;
  }
.isActive{
  background: linear-gradient(180deg, #14c473 0%, #0679dc 30%,#05091e 100%);
  box-shadow: 0px 0px 4px 0px #151515 inset;
}
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
